<template>
  <div>
    <!-- 交易明细列表 -->
    <div class="detailBox_deal" v-if="plugnNmae == 'deal'">
      <div class="detailList">
        <div class="detail_lis">
          <div class="detail_lis_top">{{ summary.pay_amount }}</div>
          <div class="detail_lis_bottom">支付金额（元）</div>
        </div>
        <div class="detail_lis">
          <div class="detail_lis_top">{{ summary.store_amount }}</div>
          <div class="detail_lis_bottom">到账金额（元）</div>
        </div>
        <div class="detail_lis">
          <div class="detail_lis_top">{{ summary.award_amount }}</div>
          <div class="detail_lis_bottom">奖励金额（元）</div>
        </div>
      </div>
      <div class="list" v-for="(item, ind) in listData" :key="ind">
        <div class="lis">
          <div class="title">序号：{{ item.rank }}</div>
          <div class="lis_conten">
            <div class="image">
              <img v-if="item.has_one_member" :src="item.has_one_member.avatar_image" alt="" />
            </div>
            <div class="right">
              <div class="right_lis">
                <div class="name" v-if="item.has_one_member">
                  {{ item.has_one_member.nickname ? item.has_one_member.nickname : "会员昵称" }}
                  <a :href="`tel:${item.has_one_member.mobile}`"><i class="iconfont icon-all_phone"></i>{{ item.has_one_member.mobile }}</a>
                </div>
                <div class="price" v-if="item.has_one_store_order">+￥{{ item.has_one_store_order.amount }}</div>
              </div>
              <div class="right_lis">
                <div class="user" v-if="item.has_one_member && item.has_one_member.realname">{{ item.has_one_member.realname }}</div>
              </div>
              <div class="right_lis" style="margin-top: 0.5rem;">
                <div class="time">{{ item.created_at }}</div>
                <div class="txt">
                  支付金额:<span class="co" v-if="item.has_one_order">￥{{ item.has_one_order.price }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="lineBox" v-if="item.award_log.length > 0">
            <div class="lime">
              <div class="lime_left">奖励金额</div>
              <div class="lime_right">奖励会员</div>
            </div>
            <div class="lime" v-for="(info, index) in item.award_log" :key="index">
              <div class="lime_left">￥{{ info.amount }}</div>
              <div class="lime_right">{{ info.nickname }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="deatail_inquire" v-if="plugnNmae == 'inquire'">
      <div class="detailList">
        <div class="detail_lis">
          <div class="detail_lis_top">{{ total }}</div>
          <div class="detail_lis_bottom">合计总数（位）</div>
        </div>
        <div class="detail_lis" v-if="inquire_act == 0">
          <div class="detail_lis_top">{{ summary.wait_amount || 0 }}</div>
          <div class="detail_lis_bottom">待奖励金额（元）</div>
        </div>
        <template v-if="inquire_act == 1">
          <div class="detail_lis">
            <div class="detail_lis_top">{{ summary.reward_amount || 0 }}</div>
            <div class="detail_lis_bottom">已奖励金额（元）</div>
          </div>
          <div class="detail_lis">
            <div class="detail_lis_top">{{ summary.wait_amount || 0 }}</div>
            <div class="detail_lis_bottom">待奖励金额（元）</div>
          </div>
        </template>
        <template v-if="inquire_act == 2">
          <div class="detail_lis">
            <div class="detail_lis_top">{{ summary.reward_amount || 0 }}</div>
            <div class="detail_lis_bottom">共奖励金额（元）</div>
          </div>
        </template>
      </div>
      <div class="list" v-for="(item, ind) in listData" :key="ind">
        <div class="lis inquire_list_line">
          <div class="title">占位：{{ item.rank }}</div>
          <div class="lis_conten">
            <div class="image">
              <img v-if="item.has_one_member" :src="item.has_one_member.avatar_image" alt="" />
            </div>
            <div class="right">
              <div class="right_lis">
                <div class="name" v-if="item.has_one_member">
                  {{ item.has_one_member.nickname ? item.has_one_member.nickname : "会员昵称" }}
                  <a :href="`tel:${item.has_one_member.mobile}`"><i class="iconfont icon-all_phone"></i>{{ item.has_one_member.mobile }}</a>
                </div>
                <div class="price" v-if="item.has_one_store_order">+￥{{ item.has_one_store_order.amount }}</div>
              </div>
              <div class="right_lis">
                <div class="user" v-if="item.has_one_member && item.has_one_member.realname">{{ item.has_one_member.realname }}</div>
              </div>
              <div class="right_lis" style="margin-top: 0.5rem;">
                <div class="time" v-if="inquire_act != '0'">最后奖励：{{ item.show_time }}</div>
                <div class="txt">
                  支付金额:<span class="co" v-if="item.has_one_order">￥{{ item.has_one_order.price }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="list_detail">
          <div class="flex list_detail_t" @click="clickTap(item, ind)">
            <div>已奖励：￥{{ item.amount_finish }}，待奖励：￥{{ item.amount_surplus }}</div>
            <div v-if="item.award_log && item.award_log.length > 0" class="list_detail_t-right">
              <span class="tip">{{ item.show ? "收起明细" : "打开明细" }}</span>
              <i class="iconfont icon-icon_down1" v-if="!item.show"></i>
              <i class="iconfont icon-icon_up1" v-if="item.show"></i>
            </div>
          </div>
          <div class="list_detail_b">支付时间：{{ item.created_at }}</div>
        </div>

        <div class="lineBox lineInquiry" v-show="item.show">
          <div class="tablisT isBtop">
            <div class="lisT_o">支付时间</div>
            <div class="lisT_t">支付会员</div>
            <div class="lisT_thr">奖励金额</div>
          </div>
          <div class="tablisT isBtop_t" v-for="(info, index) in item.award_log" :key="index">
            <div class="lisT_o">{{ info.created_at }}</div>
            <div class="lisT_t">{{ info.nickname }}</div>
            <div class="lisT_thr">+￥{{ info.amount }}</div>
          </div>
          <!-- <div class="lime" v-for="(info, index) in item.award_log" :key="index">
            <div class="lime_top">
              <div class="lime_top_l">{{ info.nickname }}</div>
              <div class="lime_top_r">+￥{{ info.amount }}</div>
            </div>
            <div class="lime_bottom">奖励时间：{{ info.created_at }}</div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="detailBox_deal" v-if="plugnNmae == 'store'">
      <div class="detailList">
        <div class="detail_lis">
          <div class="detail_lis_top">{{ summary.pay_amount }}</div>
          <div class="detail_lis_bottom">总支付金额（元）</div>
        </div>
        <div class="detail_lis">
          <div class="detail_lis_top">{{ summary.store_amount }}</div>
          <div class="detail_lis_bottom">总到账金额（元）</div>
        </div>
        <div class="detail_lis">
          <div class="detail_lis_top">{{ summary.award_amount }}</div>
          <div class="detail_lis_bottom">总奖励金额（元）</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    plugnNmae: {
      type: String,
      default: ""
    },
    summary: {
      type: Object,
      default: []
    },
    listData: {
      type: Array,
      default: []
    },
    total: {
      type: Number,
      default: 0
    },
    inquire_act: {
      type: String,
      default: ""
    }
  },
  data() {
    return {};
  },
  methods: {
    clickTap(item, index) {
      if (item.award_log <= 0) return;
      this.$set(this.listData[index], "show", item.show ? false : true);
    }
  }
};
</script>
<style lang="scss" scoped>
.detail_lis {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  .detail_lis_top {
    text-align: center;
    font-weight: bold;
    font-size: 0.94rem;
    margin-bottom: 0.4rem;
  }
  .detail_lis_bottom {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 400;
    color: #6e6e79;
  }
}
.lineBox {
  padding: 0.94rem 0.75rem;
  box-sizing: border-box;
  .lime {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.95rem;
    font-size: 0.81rem;
    line-height: 0.98rem;
    flex-wrap: wrap;
    .lime_top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .lime_top_r {
        font-size: 0.81rem;
        color: #f15353;
      }
    }
    .lime_bottom {
      flex: 1;
      margin-top: 0.5rem;
      font-size: 0.75rem;
      color: #6e6e79;
      text-align: left;
    }
  }
  .lime:first-child {
    padding-bottom: 0.63rem;
    border-bottom: 1px solid #f0f0f1;
    margin-bottom: 0.63rem;
  }
  .lime:last-child {
    margin-bottom: 0;
  }
}
.lineInquiry {
  // margin: 0 0.75rem 0 0.75rem;
  box-sizing: border-box;
  .lime {
    padding-bottom: 0.63rem;
    border-bottom: 1px solid #f0f0f1;
    margin-bottom: 0.63rem;
  }
  .lime:last-child {
    border-bottom: none;
  }
  .isBtop {
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f1;
  }
  .isBtop_t {
    padding-top: 0.625rem;
  }
  .tablisT {
    display: flex;
    .lisT_o {
      flex: 1;
      font-size: 0.75rem;
      color: #6e6e79;
      margin-right: 0.325rem;
    }
    .lisT_t {
      flex: 0.6;
      font-size: 0.81rem;
      line-height: 0.98rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .lisT_thr {
      flex: 0.6;
      font-size: 0.81rem;
      color: #f15353;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-left: 0.325rem;
    }
  }
}

.detailBox_deal,
.deatail_inquire {
  margin: 0 0.75rem;
  padding-bottom: 3rem;
  box-sizing: border-box;
  overflow: hidden;
  .detailList {
    border-radius: 0.5rem;
    display: flex;
    justify-content: space-between;
    padding: 1.25rem 1rem 1.16rem 1rem;
    background: #fff;
  }
  .inquire_list_line {
    border-bottom: 1px solid #f0f0f1;
  }
  .list {
    margin-top: 0.63rem;
    border-radius: 0.5rem;
    background: #ffffff;
    overflow: hidden;
    padding-bottom: 0.94rem;
    .lis {
      margin: 0.94rem 0.75rem 0 0.75rem;
      box-sizing: border-box;
      .title {
        font-size: 0.81rem;
        line-height: 0.98rem;
        color: #3b3b4a;
        text-align: left;
        margin-bottom: 0.94rem;
      }

      .lis_conten {
        display: flex;
        .image {
          border-radius: 50%;
          background: rgba(255, 137, 36, 0.39);
          width: 2.5rem;
          height: 2.5rem;
          flex-shrink: 0;
          margin-right: 0.53rem;
          img {
            border-radius: 50%;
            width: 2.5rem;
            height: 2.5rem;
          }
        }
        .right {
          flex: 1;
          padding-top: 0.41rem;
          padding-bottom: 0.94rem;
          overflow: hidden;
          box-sizing: border-box;
          .right_lis {
            display: flex;
            justify-content: space-between;
            // align-items: center;
            .name {
              font-size: 0.94rem;
              font-weight: 500;
              color: #00001c;
              line-height: 1rem;
              flex: 1;
              text-align: left;
              margin-right: 1rem;
              a {
                color: #f15353;
              }
            }
            .price {
              font-size: 0.88rem;
              font-weight: 500;
              color: #f15353;
              flex-shrink: 0;
            }
            .user {
              font-size: 0.69rem;
              color: #6e6e79;
              line-height: 0.75rem;
              margin-top: 0.5rem;
            }
            .time {
              line-height: 0.98rem;
              font-size: 0.69rem;
              color: #6e6e79;
              text-align: left;
              flex-shrink: 0;
              margin-right: 0.325rem;
            }
            .txt {
              flex: 1;
              text-align: right;
              font-size: 0.69rem;
              color: #6e6e79;
              line-height: 0.98rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              .co {
                color: #f15353;
              }
            }
          }
        }
      }
    }
  }
  .list_detail {
    padding-left: 0.75rem;
    margin-top: 0.94rem;
    .list_detail_t-right{
      padding-right: 0.625rem;
      display: flex;
      align-items: center;
    }
    .list_detail_t {
      justify-content: space-between;
      font-size: 0.75rem;
      font-weight: 500;
      color: #00001c;
      margin-bottom: 0.5rem;
      .icon-icon_down1,
      .icon-icon_up1 {
        color: #aaaab3;
        margin-left: 0.43rem;
        font-size: 11px;
      }
      .tip {
        color: #aaaab3;
        // font-size: 11px;
        margin-left: 0.325rem;
      }
    }
    .list_detail_b {
      font-size: 0.75rem;
      line-height: 0.98rem;
      color: #6e6e79;
      text-align: left;
    }
  }
}
</style>
